<template>
  <view class="flex-sb-center py-24rpx w-750rpx m-a box-border px-32rpx">
    <base-img-box :size="124" :round="124" :imgSrc="getAvatar" :thumbnailPreUrl="data.personAvatar && data.personAvatar.thumbnailPreUrl"  />
    <view class="w-290rpx">
      <view class="font-size-32rpx ellipsis">
        {{ getInfoVo.nickname || '--' }}
      </view>
      <view class="font-size-24rpx ellipsis mt-8rpx">
        {{ getInfoVo.gender == '0' ? '男' : '女' }} · {{ calculateAge(getInfoVo.birthYearMonth) }}岁 · {{ getInfoVo.professionName || '--' }}
      </view>
      <view class="color-#2F2F2F font-size-24rpx ellipsis mt-8rpx"
        :class="[{ 'color-#fff': themeConfig.theme === 'dark' }]"
      >
        <i class="iconfont icon-frame font-size-28rpx mr-6rpx inline-block"></i>
        {{ getInfoVo.cityName || '-' }}{{ getInfoVo.districtName || '-' }}
      </view>
    </view>
    <view class="w-218rpx h-68rpx relative bg-linear-8 rounded-68rpx color-#fff flex-center" 
      @click="getBindPhoneUserIdConfirm"
    >
      <i class="iconfont icon-bodadianhua font-size-26rpx mr-12rpx inline-block"></i>
      <view class="inline-block font-size-26rpx font-bold">虚拟号通话</view>
    </view>
  </view>
  <view class="border-1px"></view>
</template>

<script lang="ts" setup>
import baseImgBox from "@/components/base/base-img-box.vue";
import { GetRecentContacts } from '@/service/db_user';
import { useThemeStore, useUserStore } from '@/store';
import { calculateAge, formatDate } from "@/utils";
import { GetBindPhoneUserId } from "@/service/db_user";
import { useMessage, useToast } from "wot-design-uni";

// 主题颜色
const { themeConfig } = useThemeStore();
const user = useUserStore();
const toast = useToast();
const emit = defineEmits(['makeCall']);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
})

const message = useMessage();
// 获取虚拟电话
const getBindPhoneUserIdConfirm = async () => {
  emit('makeCall', props.data);
}

const getInfoVo = computed(() => {
  const _userProfileInfoVo = props.data.userProfileInfoVo || {};
  return _userProfileInfoVo
})

// 获取头像
const getAvatar = computed(() => {
  const personAvatar = props.data.personAvatar || {};
  return personAvatar.preUrl || ''
})
</script>

<script lang="ts">
export default {
  // 微信小程序开启样式穿透
  options: { styleIsolation: "shared" },
};
</script>

<style lang="scss" scoped>
</style>
